import React, { Component } from 'react'
import "./activityinfo.scss";
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiCoursesCatalogue , getApiBrandInfo , getApiSaveUserShopCart , getApiUserShopCart , getApiJoinCourse } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage';
import { message } from 'antd';

export default class activityinfo extends Component {

    state = {
        ctype:1,
        data:{
            info:{},
            list:[],
        },
        list:[],
        barr:[],
        id:'',
    }

    componentWillMount(){
        let id = UrlSearch("id");
        this.setState({
            id
        })
        this.getData(id);
        this.getCate(id);

        if(get('token')){
            this.getShopData();
        }
    }

    componentDidMount(){
        window.scroll(0,0);
    }

    gotoStudy=(item,elem)=>{

        if(!this.state.data.is_true){
            message.info("请先购买课程！");
            return false;
        }
        
        if(!elem.is_lock){
            message.info("请按顺序学习！");
            return false;
        }
        
        this.props.history.push('/study?id='+this.state.data.id+'&chapter_id='+item.id+"&content_id="+elem.id);

    }

    gotoContinueStydy=()=>{
        this.props.history.push('/study?id='+this.state.data.id+'&chapter_id='+this.state.data.learn_chapter_id+"&content_id="+this.state.data.learn_content_id);
    }

    getShopData=()=>{
        getApiUserShopCart({token:get('token')})
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    barr:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoChangeCtype=(type)=>{
        this.setState({
            ctype:type
        })
    }

    getCate=(id)=>{
        let param = {
            id,
            token:get('token'),
        }

        getApiCoursesCatalogue(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    getData=(id)=>{
        let param = {
            id,
            token:get('token'),
        }

        getApiBrandInfo(param)
        .then(req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoReceive=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        let param = {
            token:get('token'),
            course_id:this.state.data.id
        }

        getApiJoinCourse(param)
        .then( req =>{
            if(req.data.code === 1){
                message.success('领取成功!')
                this.getData(this.state.id)
            }else{
                message.info(req.data.msg);
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoAdd=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        let param = {
            type:1,
            course_id:this.state.data.id,
            money:this.state.data.money,
            token:get('token'),
            course_type:1,
        }

        getApiSaveUserShopCart(param)
        .then( req =>{
            if(req.data.code === 1){
                message.success("加入成功");
                this.getShopData();
            }else{
                message.info(req.data.msg)
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoBuy=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        let param = {
            type:2,
            course_id:this.state.data.id,
            money:this.state.data.money,
            token:get('token'),
            course_type:1,
        }

        getApiSaveUserShopCart(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.gotoPage('/pay?id='+this.state.id+'&oid='+data)
            }else{
                message.info(req.data.msg)
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoShop=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        this.gotoPage('/basket')
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/activityinfo?id='+id);
        this.setState({id})
        this.getData(id);
        this.getCate(id);
    }

    render() {
        return (
            <div className="activityinfo">
                <Header />
                <div className="cen">
                    <div className="curent">
                        <div className="cleft">
                            <img className="img" alt="" src="assets/imgs/dingwei.png" />
                            <p className="p_point" onClick={()=>{
                                if(get('type')){
                                    // this.gotoPage('/index')

                                    this.gotoPage('/home')
                                  }else{
                                    this.gotoPage('/home')
                                  }
                            }}>首页</p>
                            <img className="icon" alt="" src="assets/imgs/more.png" />
                            <p className="p_point" onClick={()=>{this.gotoPage('/activity')}}>品牌活动</p>
                            <img className="icon" alt="" src="assets/imgs/more.png" />
                            <p>品牌活动详情</p>
                        </div>
                        {/* <div className="c_shop" onClick={()=>{this.gotoShop()}}>
                            <img alt="" src="assets/imgs/leixinglan.png" />
                            <p>课程篮（{this.state.barr.length}）</p>
                        </div> */}
                    </div>
                </div>
                <div className="cen">
                    <div className="cmain">
                        <div className="cleft">
                            <div className="info">
                                <div className="ileft" style={{backgroundImage:"url('"+this.state.data.info.image+"')"}}></div>
                                <div className="iright">
                                    <div className="title">
                                        <h2>{this.state.data.info.title}</h2>
                                    
                                    </div>
                                    <p>{this.state.data.info.info}</p>
                                </div>
                            </div>

                            <div className="cbox">
                                <div className="chead">
                                    <div className={this.state.ctype === 1?"citem c_active":"citem"} onClick={()=>{this.gotoChangeCtype(1)}}>
                                        详情介绍
                                        <div className="icen"><span></span></div>
                                    </div>
                                </div>
                                <div className="cinfo" hidden={this.state.ctype !== 1}>
                                    <div className="ctitle">
                                        <img alt="" src="assets/imgs/kechenggaishu.png" />
                                        <p>活动概述</p>
                                    </div>
                                    <div className="ctext">
                                        <div className="cont" dangerouslySetInnerHTML={{
                                                __html: this.state.data.info.content
                                            }}></div>
                                    </div>
                                </div>

                                <div className="cinfo" hidden={this.state.ctype !== 2}>
                                    {
                                        this.state.list.map((item,index)=>{
                                            return <div className="citem" key={index}>
                                                        <h2>{item.title}</h2>
                                                        {
                                                            item.child.map((elem,num)=>{
                                                                return <div className="c_class" key={num} onClick={()=>{this.gotoStudy(item,elem)}}>
                                                                            <div hidden={this.state.data.is_true}>
                                                                                <img alt="" src="assets/imgs/suo1.png" />
                                                                            </div>
                                                                            <p>{elem.title}</p>
                                                                            <h4>{elem.type === 1?"文件":"视频"}</h4>
                                                                            <div className="record">
                                                                                <div style={{width:parseInt(elem.record)+"%"}}></div>
                                                                            </div>
                                                                            <h3>{elem.exam_score?elem.exam_score+"分":""}</h3>
                                                                        </div>
                                                            })
                                                        }
                                                    </div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    
                        <div className="cright">
                            {/* <div className="cteacher" onClick={()=>{this.gotoPage('/teacherinfo?id='+this.state.data.info.id)}}>
                                <h1>授课讲师</h1>
                                <div className="ct_info">
                                    <div className="ct_avatar" style={{backgroundImage:"url('"+this.state.data.info.path_text+"')"}}></div>
                                    <div className="cdiv">
                                        <h2>{this.state.data.info.title}</h2>
                                        <p>{this.state.data.info.name}</p>
                                    </div>
                                </div>
                                <div className="ctext">
                                    <p>名师课程：{this.state.data.info.courses}课</p>
                                    <p>名师直播：{this.state.data.info.living}场</p>
                                </div>
                            </div> */}

                            <div className="c_course">
                                <h1>相关活动</h1>
                                {
                                    this.state.data.list.map((item,index)=>{
                                        return <div className="item" hidden={index > 2} key={index} onClick={()=>{this.gotoCourseInfo(item.id)}}>
                                                    <div className="itop" style={{backgroundImage:"url('"+item.image+"')"}}>
                                                        {/* <span hidden={!item.is_new}>精品</span> */}
                                                    </div>
                                                    <div className="ibom">
                                                        <h2>{item.title}</h2>
                                                        <div className="itext">{item.info}</div>
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
